<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 1，什么是数据代理机制？
        通过访问 代理对象的属性 来间接访问 目标对象的属性
        数据代理机制的实现需要依靠 ：Object.defineProperty()方法
        2,Es6新特性：
        在对象中的函数/方法 ：function 是可以省略的
     -->
    <div id="app"></div>
    <script src="./js/vue.js"></script>
    <script>
        //目标对象
        let target = {
            name: 'cyh',
            age: 18
        }
        //代理对象
        let proxy = {}

        //如果要实现数据代理机制的话，就需要给proxy新增一个name属性
        //注意，代理对象新增的这个属性的名字 和 目标对象的属性名要一致
        Object.defineProperty(proxy, 'target', {
            get() {
                //间接访问目标对象的属性
                return target
            },
            set(value) {
                target = value
            }
        })
    </script>
</body>

</html>